<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-table/src/Table.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-grid-layout.html">$ui/components/my-grid-layout</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-img-text.html">$ui/components/my-img-text</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-dialog.html#~event:close">close</a></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-contextmenu.html#~event:contextmenu">contextmenu</a></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-grid-layout.html#~event:layout-updated">layout-updated</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-contextmenu.html#~event:mouseenter">mouseenter</a></li><li></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-dialog.html#~event:open">open</a></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-form.html#~event:submit">submit</a></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-table/src/Table.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div class="my-table" :class="classes">
    &lt;MySpin v-bind="spin" fit :loading="isPager &amp;&amp; currentLoading">
      &lt;Toolbar v-if="toolbar" ref="toolbar" :title="title" :size="$attrs.size">
        &lt;slot name="title" slot="title">&lt;/slot>
        &lt;slot name="actions" slot="actions">&lt;/slot>
      &lt;/Toolbar>
      &lt;div class="my-table__wrapper" :style="{height:tableHeight}">
        &lt;ElTable ref="elTable"
                 v-bind="$attrs"
                 v-on="$listeners"
                 :data="isVirtual ? viewItems : list"
                 :height="tableHeight ? '100%' : null">
          &lt;TableColumn v-for="(col, index) in columns"
                       :key="index"
                       v-bind="col">


            &lt;template v-if="col.type==='handle' || ( col.prop &amp;&amp; $scopedSlots[col.prop])" v-slot="scope">
              &lt;!-- 自定义字段 插槽-->
              &lt;slot :name="col.prop || '_handle'" v-bind="scope" :column="col" :startIndex="startIndex">&lt;/slot>
            &lt;/template>

            &lt;template v-if="col.type==='handle' || (col.prop &amp;&amp; $scopedSlots[`${col.prop}.header`])"
                      v-slot:header="scope">
              &lt;!-- 自定义字段表头 插槽-->
              &lt;slot :name="`${col.prop||'_handle'}.header`" v-bind="{column:col, $index:index, ...scope}">&lt;/slot>
            &lt;/template>

          &lt;/TableColumn>

          &lt;template v-slot:append>
            &lt;!-- 表格底部内容 插槽-->
            &lt;slot name="append">&lt;/slot>
            &lt;!-- 滚动加载loading 插槽-->
            &lt;div v-if="isScroll &amp;&amp; currentLoading" class="my-table__skeleton">
              &lt;slot name="skeleton">加载中...&lt;/slot>
            &lt;/div>

            &lt;div v-if="isScroll &amp;&amp; !currentLoading &amp;&amp; isNoMore" class="my-table__complete">
              &lt;!-- 滚动加载完成提示 插槽-->
              &lt;slot name="complete">没有更多了&lt;/slot>
            &lt;/div>
          &lt;/template>

          &lt;!-- 自动无数据提示 插槽-->
          &lt;slot name="empty" slot="empty">&lt;/slot>

        &lt;/ElTable>
      &lt;/div>
      &lt;Pagination v-if="isPager &amp;&amp; pagination!==null &amp;&amp; currentTotal"
                  ref="pager"
                  v-bind="pagerProps"
                  :total="currentTotal"
                  :currentPage="currentPage"
                  class="my-table__pager"
                  @size-change="handlePageSizeChange"
                  @current-change="handlePageChange">&lt;/Pagination>
    &lt;/MySpin>
  &lt;/div>
&lt;/template>

&lt;script>
  /**
   * 表格组件, 扩展el-table
   * @module $ui/components/my-table
   */


  import {Table, TableColumn, Pagination} from 'element-ui'
  import {getStyle} from 'element-ui/lib/utils/dom'
  import {MySpin} from '$ui'
  import Pager from './Pager'
  import Scroll from './Scroll'
  import Virtual from './Virtual'
  import Toolbar from './Toolbar'

  /**
   * 插槽
   * @member slots
   * @property {string} title 定义标题
   * @property {string} actions 定义操作区工具按钮
   * @property {string} toolbar 定义工具区内容，设置toolbar， title和actions将失效
   * @property {string} append 定义表格底部内容，与el-table append 插槽一致
   * @property {string} empty 定义无数据是显示内容，与与el-table empty 插槽一致
   * @property {string} $prop 作用域插槽，自定义列显示内容，$prop是动态值，表示字段名称，即el-table-column组件的prop参数值，与el-table-column的默认插槽一致
   * @property {string} $prop.header 作用域插槽 定义列头显示，与el-table-column的header插槽一致
   * @property {string} skeleton 定义滚动加载表格的loading效果
   * @property {string} complete 定义滚动加载表格加载到没有更多时的效果
   */

  export default {
    name: 'MyTable',
    mixins: [Pager, Scroll, Virtual],
    components: {
      ElTable: Table,
      TableColumn: TableColumn,
      Pagination: Pagination,
      MySpin,
      Toolbar
    },
    /**
     * 属性参数
     * @member props
     * @property {string} [title] 表格标题
     * @property {boolean} [toolbar] 显示工具条，需要开启toolbar， title才有效
     * @property {boolean} [headerBackground] 表格头显示背景色
     * @property {Array} [data] 表格数据，可通过data 或 loader 参数为表格加载数据
     * @property {Array} [columns] 表格列配置，支持全部el-table-column组件的参数，如果要用插槽定义内容，必须要设置prop
     * @property {string} [mode=pager] 模式，支持页码分页、滚动分页、虚拟列表 三种，可选值：'pager', 'scroll', 'virtual'
     * @property {boolean} [loading] 显示加载中
     * @property {Object} [spin] 加载中的MySpin组件配置参数
     * @property {boolean} [fit] 适应父容器
     * @property {number} [page=1] 初始页码
     * @property {number} [pageSize=10] 初始每页显示几条
     * @property {number} [total=0] 记录总数
     * @property {Object} [pagination] 分页组件el-pagination的其他配置
     * @property [Function] [loader] 数据加载函数，参数：page，pageSize, 必须返回Promise
     * @property {boolean} [auto] 初始化是否自动调用loader，如果需要手动调用设置为false
     * @property {number} [scrollDelay=200] 滚动加载节流时延，单位为ms
     * @property {number} [scrollDistance=0] 滚动加载模式，触发加载的距离阈值，单位为px
     * @property {number} [itemHeight] 虚拟列表模式，行的高度
     */

    props: {
      // 标题
      title: String,
      // 工具区
      toolbar: Boolean,
      // 表头加背景色
      headerBackground: Boolean,
      // 表格数据
      data: {
        type: Array,
        default() {
          return []
        }
      },
      // 列配置
      columns: {
        type: Array,
        default() {
          return []
        }
      },

      // 模式：页码分页、滚动分页、虚拟列表
      mode: {
        type: String,
        default: 'pager',
        validator(val) {
          return ['pager', 'scroll', 'virtual'].includes(val)
        }
      },
      // 显示loading
      loading: Boolean,

      // loading配置
      spin: {
        type: Object,
        default() {
          return {
            tip: '正在拼命加载...'
          }
        }
      },

      // 适应父容器
      fit: Boolean,

      // 初始页码
      page: {
        type: Number,
        default: 1
      },

      // 初始页大小
      pageSize: {
        type: Number,
        default: 10
      },
      // 数组总数
      total: {
        type: Number,
        default: 0
      },
      // 分页组件其他配置
      pagination: {
        type: [Object, Boolean],
        default() {
          return {
            background: true,
            layout: 'total, ->, prev, pager, next'
          }
        }
      },
      // 加载数据函数
      loader: Function,

      // 实例化自动调用加载函数
      auto: {
        type: Boolean,
        default: true
      },
      // 节流时延，单位为ms
      scrollDelay: {
        type: Number,
        default: 200
      },
      // 触发加载的距离阈值，单位为px
      scrollDistance: {
        type: Number,
        default: 0
      },
      // 行的高度， 虚拟列表专用，默认按表格size计算
      itemHeight: Number
    },
    data() {
      return {
        list: [],
        currentPage: this.page,
        currentTotal: this.total,
        currentPageSize: this.pageSize,
        errorMessage: null,
        toolbarHeight: 0,
        pagerHeight: 0,
        currentLoading: this.loading
      }
    },
    computed: {
      classes() {
        return {
          'is-fit': this.fit,
          [`my-table--${this.mode}`]: !!this.mode,
          'my-table--header-bg': this.headerBackground
        }
      },
      tableHeight() {
        if (!this.fit) return null
        return `calc(100% - ${this.toolbarHeight + this.pagerHeight}px)`
      }
    },
    watch: {
      loading: {
        immediate: true,
        handler(val) {
          this.currentLoading = val
        }
      },
      // 初始化数据
      data: {
        immediate: true,
        handler(val) {
          this.list = Object.freeze(val.slice(0))
        }
      },
      list() {
        this.startRowIndex = 0
        this.startOffset = 0
        this.$nextTick(() => {
          this.updateView()
          this.scrollTop()
        })

      }
    },
    methods: {
      updateView() {
        if (this.$refs.toolbar) {
          const el = this.$refs.toolbar.$el
          const marginBottom = parseInt(getStyle(el, 'margin-bottom')) || 0
          this.toolbarHeight = el.getBoundingClientRect().height + marginBottom
        }

        if (this.$refs.pager) {
          this.pagerHeight = this.$refs.pager.$el.getBoundingClientRect().height
        }
      },
      load() {
        if (!this.loader) return
        const loaders = {
          pager: this.pagerLoaded,
          scroll: this.scrollLoaded,
          virtual: this.virtualLoaded
        }
        this.currentLoading = true
        this.errorMessage = null
        this.loader(this.currentPage, this.currentPageSize).then(res => {
          const loaded = loaders[this.mode]
          loaded &amp;&amp; loaded(res)
          this.currentTotal = res.total || 0
          /**
           * 请求成功时触发
           * @event success
           * @param {object} [res] 请求响应数据
           */
          this.$emit('success', res)
        }).catch(e => {
          this.errorMessage = e;
          /**
           * 请求失败时触发
           * @event error
           * @param {*} e 错误信息
           */
          this.$emit('error', e)
        }).finally(() => {
          this.currentLoading = false
        })
      },
      /**
       * 刷新列表
       * @method refresh
       * @param {number} [page=1] 刷新的页码
       */
      refresh(page) {
        this.currentPage = page || this.currentPage
        this.load()
      },

      // 继承el-table组件的方法
      extendMethods(ref, names = []) {
        if (!ref) return

        names.forEach(name => {
          // 子组件的方法加到实例
          this[name] = (...args) => {
            ref[name].apply(ref, args)
          }
        })

      }
    },
    mounted() {
      this.updateView()
      // 支持el-table的全部方法
      this.extendMethods(this.$refs.elTable, [
        'clearSelection',
        'toggleRowSelection',
        'toggleAllSelection',
        'toggleRowExpansion',
        'setCurrentRow',
        'clearSort',
        'clearFilter',
        'doLayout',
        'sort'
      ])
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a> on Wed Jun 10 2020 17:09:13 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
